<template>
  <div v-if="info.id" class="studentReport_wrap">
    <div class="report_info">
      <div class="info_title">{{ info.h5ParameterJson.ClubName }}</div>
      <div class="info_sub_title">学员周期报告</div>
      <div class="info_student_name">{{ info.h5ParameterJson.StudentName }}</div>
      <div class="info_date">{{ cycleDate }}</div>
      <div class="pink_ball" />
      <div class="orange_ball" />
      <div class="light_blue_ball" />
      <div class="dark_blue_ball" />
      <div class="ingo_arc" />
    </div>
    <!--  -->
    <div class="report_letter">
      <div class="letter_title">{{ info.h5ParameterJson.StudentName }}家长您好，</div>
      <div class="letter_content">
        我叫{{ info.h5ParameterJson.CoachName }}，是{{ info.h5ParameterJson.StudentName }}的专属教练，{{ info.h5ParameterJson.StudentName }}同学在{{ info.h5ParameterJson.ClubName }}于{{ beginDateInfo.year }}年{{ beginDateInfo.month }}月{{ beginDateInfo.day }}日至{{ endDateInfo.year }}年{{ endDateInfo.month }}月{{ endDateInfo.day }}日的表现情况如下，请您查收。
      </div>
    </div>
    <!--  -->
    <div class="report_review">
      <div class="review_wrap">
        <div class="review_title">教练点评</div>
        <div class="review_content">{{ info.h5ParameterJson.Comment }}</div>
      </div>
    </div>
    <!--  -->
    <div class="report_link">
      <div class="link_item" @click="jumpTodDetail('MessageH5StudentReportPersonInfo')">个人资料</div>
      <!-- <div class="link_item" @click="jumpTodDetail('MessageH5StudentReportGameInfo')">赛事记录</div>
      <div class="link_item" @click="jumpTodDetail('MessageH5StudentReportTrainInfo')">培训记录</div>
      <div class="link_item" @click="jumpTodDetail('MessageH5StudentReportDeclareInfo')">级段位申报记录</div> -->
    </div>
    <!--  -->
    <div class="thanks">
      <div class="thanks_left">
        <div class="thanks_item thanks_paragraph">感谢您的支持</div>
        <div class="thanks_item thanks_paragraph">{{ info.h5ParameterJson.ClubName }}报告</div>
      </div>
      <div class="thanks_right">
        <div class="thanks_item thanks_paragraph">{{ info.h5ParameterJson.CoachName }}</div>
        <div class="thanks_item thanks_paragraph">{{ info.h5ParameterJson.PhoneNumber }}</div>
        <div class="thanks_item thanks_paragraph">{{ creationTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  api_GET_ClubMessageId
} from '@/extend/api/hallswaggerApi/app.js';

export default {
  data () {
    return {
      info: {},
      msgId: '',
      studentId: '',
      registerId: ''
    };
  },
  computed: {
    cycleDate () {
      let _beginDate = '';
      let _endDate = '';
      try {
        if (this.info.h5ParameterJson) {
          _beginDate = this.info.h5ParameterJson.BeginDate.slice(0, 10).replace(/-/g, '.');
          _endDate = this.info.h5ParameterJson.EndDate.slice(0, 10).replace(/-/g, '.');
        }
      } catch (error) {
        console.log(error);
      }
      return `${_beginDate} - ${_endDate}`;
    },
    beginDateInfo () {
      const _date = this.info.h5ParameterJson.BeginDate;
      return {
        year: _date.slice(0, 4),
        month: _date.slice(5, 7),
        day: _date.slice(8, 10)
      };
    },
    endDateInfo () {
      const _date = this.info.h5ParameterJson.EndDate;
      return {
        year: _date.slice(0, 4),
        month: _date.slice(5, 7),
        day: _date.slice(8, 10)
      };
    },
    creationTime () {
      const _date = this.info.h5ParameterJson.CreationTime;
      return _date.slice(0, 10).replace(/-/g, '.');
    }
  },
  created () {
    const { id } = this.$route.params;
    const { studentId, registerId } = this.$route.query;
    this.msgId = id;
    this.studentId = studentId;
    this.registerId = registerId;
    this.getInfo(this.msgId, {
      IncludeMessageTemplateType: true
    });
  },
  methods: {
    getInfo (id, qo) {
      api_GET_ClubMessageId(id, qo)
        .then(
          res => {
            res.h5ParameterJson = JSON.parse(res.h5ParameterJson);
            this.info = res;
          }
        );
    },
    jumpTodDetail (routeName) {
      this.$router.push({
        name: routeName,
        query: {
          studentId: this.studentId,
          registerId: this.registerId
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .report_info {
    position: relative;
    padding-top: 0.37rem;
    text-align: center;
    color: #353434;
    letter-spacing: 1px;
    background-color: #f3f5fa;
  }
  .info_title {
    position: relative;
    padding: 0 0.2rem;
    margin-bottom: 0.24rem;
    font-weight: 500;
    font-size: 0.4rem;
    line-height: 0.56rem;
    z-index: 9;
  }
  .info_sub_title {
    position: relative;
    padding: 0 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 0.3rem;
    line-height: 0.42rem;
    z-index: 9;
  }
  .info_student_name {
    position: relative;
    padding: 0 0.2rem;
    margin-bottom: 0.26rem;
    font-weight: 500;
    font-size: 0.36rem;
    line-height: 0.5rem;
    z-index: 9;
  }
  .info_date {
    position: relative;
    padding: 0 0.2rem;
    margin-bottom: 0.31rem;
    font-size: 0.26rem;
    line-height: 0.36rem;
    z-index: 9;
  }
  .ingo_arc {
    width: 100%;
    height: 0.77rem;
    background-color: #fcfcfc;
    background-image: url('../../assets/images/hall/report_bg.png');
    background-size: 100% 100%;
  }
  .pink_ball {
    position: absolute;
    top: 2.29rem;
    left: 0.66rem;
    width: 0.57rem;
    height: 0.57rem;
    background-color: #f7e8fb;
    border-radius: 50%;
  }
  .orange_ball {
    position: absolute;
    top: 0.08rem;
    right: 0.2rem;
    width: 0.19rem;
    height: 0.19rem;
    background-color: #f8ebe2;
    border-radius: 50%;
  }
  .light_blue_ball {
    position: absolute;
    top: 0.27rem;
    right: 0.9rem;
    width: 1.03rem;
    height: 1.03rem;
    background-color: #e8edfb;
    border-radius: 50%;
  }
  .dark_blue_ball {
    position: absolute;
    top: 1.59rem;
    right: 0.75rem;
    width: 0.34rem;
    height: 0.34rem;
    background-color: #cddafd;
    border-radius: 50%;
  }

  .report_letter {
    padding: 0.5rem 0.4rem 0;
    color: #353434;
    letter-spacing: 1px;
  }
  .letter_title {
    margin-bottom: 0.2rem;
    font-weight: 500;
    font-size: 0.26rem;
    line-height: 0.36rem;
  }
  .letter_content{
    padding-bottom: 0.29rem;
    text-indent: 2em;
    font-size: 0.24rem;
    line-height: 0.34rem;
    word-break: break-all;
  }

  .report_review {
    padding: 0 0.2rem;
  }
  .review_wrap {
    padding: 0.3rem 0.2rem;
    background: #FFF;
    box-shadow: 0 0.02rem 0.15rem rgba(53, 69, 105, 0.1);
    border-radius: 0.1rem;
    letter-spacing: 1px;
    color: #353434;
  }
  .review_title {
    padding-bottom: 0.2rem;
    font-weight: 500;
    font-size: 0.3rem;
    line-height: 0.42rem;
  }
  .review_content {
    font-size: 0.26rem;
    line-height: 0.36rem;
  }

  .report_link {
    padding: 0.4rem 0.3rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: -0.2rem;
  }
  .link_item {
    width: 3.3rem;
    height: 0.8rem;
    margin-bottom: 0.2rem;
    font-size: 0.24rem;
    line-height: 0.8rem;
    color: #1B44BE;
    text-align: center;
    background: #F7F9FF;
    box-shadow: 0 0.02rem 0.1rem #DEE6F7;
    border-radius: 0.12rem;
  }

  .thanks {
    padding: 0 0.3rem 1rem;
  }
  .thanks_item {
    font-size: 0.24rem;
    line-height: 0.34rem;
    letter-spacing: 1px;
    color: #353434;
  }
  .thanks_left {
    padding-bottom: 0.1rem;
  }
  .thanks_right {
    text-align: right;
  }
  .thanks_paragraph {
    margin-bottom: 0.2rem;
  }
</style>
